<template>
  <div>
    <common-head title="分类页" />
    <div class="wrap">
      <div class="wrap-left">
        <div class="cates">
          <div
            :class="[
              'cate',
              {
                active: index === num,
              },
            ]"
            v-for="(item, index) in cates"
            :key="index"
            @click="changeCate(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="wrap-right">
        <img src="@/assets/imgs/flower.png" alt="" class="bigPic" />
        <div class="items-right" @clickItem='enterDetail' @addCartHome='addCartHome'>
          <div
            class="home-recommend"
            v-for="item in items"
            :key="item.id"
            @click="clickItem(item.id)"
          >
            <div class="reco-left">
              <img :src="item.pic" alt="" width="200px" />
            </div>
            <div class="reco-right">
              <h4 clsss="title">{{ item.name }}</h4>
              <p class="desc">{{ item.tags ? item.tags : "暂无描述" }}</p>
              <div class="buttom">
                <span class="price"> ￥{{ item.minPrice }} </span>
                <van-icon
                  @click.stop="addCartHome(item)"
                  name="gouwuche1"
                  class-prefix="icon"
                  class="xianhua"
                ></van-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <my-tabbar></my-tabbar>
  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import CommonHead from '../../components/CommonHead.vue'
import { fetchCates, fetchItems } from '@api'
import { Toast } from 'vant'

export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
     addCartHome1 (item) {
      // console.log(11)
      if ( !isLogin ()) {
        // 没有登录
        this.$router.push('/login')
        return
      }
      this.$store.commit('cart/add_cart', item)
      Toast('已经加入购物车，赶紧加购吧')
    },
    enterDetail (id) {
      this.$router.push({
        path: '/detail',
        query: { id }
      })
    },
    clickItem (id) {
      this.$emit('clickItem', id)
    },
    addCartHome (item) {
      // console.log(item)
      item = {
        ...item,
        num: 1,
        checked: true
      }
      this.$emit('addCartHome', item)
    },
    fetchCates () {
      fetchCates().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data
          this.fetchItems()
        }
      })
    },
    fetchItems () {
      fetchItems({
        categoryId: this.cates[this.num].id
      }).then((res) => {
        if (res.data.code === 0) {
          this.items = res.data.data
        }
      })
    },
    changeCate (index) {
      this.num = index
      this.fetchItems()
    }
  },
  created () {
    this.fetchCates()
  },
  data () {
    return {
      num: 0, // 控制分类切换状态
      items: [],
      cates: [],
      isLoading: false
    }
  },
  components: {
    MyTabbar,
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  position: fixed;
  top: 50px;
  bottom: 50px;
  left: 0;
  right: 0;
  background: #fff;
  .wrap-left {
    height: 100%;
    width: 120px;
    // background: pink;
    border-right: 1px solid #eee;
    .cates {
      width: 100%;
      height: 40px;
      .cate {
        margin: 10px 0;
        text-align: center;
        line-height: 40px;
        border-left: 3px solid transparent;
        &.active {
          color: #ff734c;
          border-left: 3px solid #ff734c;
        }
      }
    }
  }
  .reco-left>img{
    width: 100px;
  }
  .wrap-right {
    .bigPic {
      width: 100%;
    }
    overflow: auto;
    height: 100%;
    flex: 1;
    // background: goldenrod;
    padding: 10px;
    box-sizing: border-box;
    .items-right {
      background: #fff;
      box-shadow: 0px 0px 1px rgb(190, 189, 189);
    }
  }
}
.home-recommend {
  display: flex;
  margin: 10px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  .reco-right {
    flex: 1;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .buttom {
      display: flex;
      .price {
        font-weight: bold;
        flex: 1;
      }
      .xianhua {
        background: #fb9998;
        padding: 3px;
        color: #fff;
        border-radius: 50%;
      }
    }
  }
}
</style>
